import { Badge, Button, Card, Modal, Space, Table, Tag } from "antd"
import { 
  EyeOutlined
} from '@ant-design/icons';
import { useEffect, useState } from "react";
import { Get_Post_Employee } from "../../service/organization";
import { EmployeeDetails } from "./EmployeeDetails";
export const DutyDetails = (props) => {
    const currentDuty=props.data;
      // 分页参数管理
      const [pagination, setPagination] = useState({
        current: 1,        // 当前页码
        pageSize: 5,      // 每页条数
        total: 0,          // 总数据条数
      });
    
  const [staffData,setStaffData]=useState();
  const [empDetailVisible,setEmpDetailVisible]=useState();
    const [currentEmp,setCurrentEmp]=useState();
  
  const bind_employee=async(page = pagination.current, pageSize = pagination.pageSize)=>{
   
      const res=await Get_Post_Employee({id:currentDuty.id,page:page,limit:pageSize});
      if(res.code==0){
        console.log(res.data.data)
        setStaffData(res.data.data);
         setPagination(prev => ({
          ...prev,
          current: page,
          pageSize: pageSize,
          total: res.data.total || 0
        }));
      }
    }

  useEffect(()=>{
    
    bind_employee();
  },[props.data])
  
  // 人员表格列定义
  const staffColumns = [
     {
      title: '账号',
      dataIndex: 'account',
      key: 'account'
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => (
        <Space>
          <img 
            src={record.photo} 
            alt={text} 
            style={{ width: 30, height: 30, borderRadius: '50%', marginRight: 8 }} 
          />
         
        </Space>
      )
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender'
    },
   
    {
      title: '入职日期',
      dataIndex: 'time',
      key: 'time'
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => (
        <Badge status={status === '在职' ? 'success' : 'default'} text={status} />
      )
    },
   
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Button 
          size="small" 
          type="text" 
          icon={<EyeOutlined />}
          onClick={() => handleViewStaff(record)}
        >
          查看详情
        </Button>
      )
    }
  ];

  const handleViewStaff=(obj)=>{
      setCurrentEmp(obj);
    setEmpDetailVisible(true);
  
  }

    return <>
        <div>
            <div className="modal-box">
                <div style={{ textAlign: 'center', marginBottom: 20 }}>
                    <h2 style={{ margin: 0 }}>{currentDuty.name}</h2>
                    <div style={{ marginTop: 10 }}>
                        
                        <Badge
                            status={
                                currentDuty.lv === '低级' ? 'default' :
                                    currentDuty.lv === '中级' ? 'processing' :
                                        currentDuty.lv === '高级' ? 'success' : 'error'
                            }
                            text={currentDuty.lv}
                        />
                      
                    </div>
                </div>



                {/* 岗位人员表格 */}
                <Card style={{ marginBottom: 15 }}>
                    <Table
                        bordered
                        columns={staffColumns}
                        dataSource={staffData}
                        pagination={pagination}
                        rowKey="key"
                    />
                </Card>

                <Card title="岗位职责" style={{ marginBottom: 15 }}>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
                     {currentDuty.responsibility}
                    </div>
                </Card>

            </div>
             <Modal
        title={`员工详情`}
        open={empDetailVisible}
        onCancel={() => setEmpDetailVisible(false)}
        width={900}
        footer={null}
        destroyOnHidden
      >
        {currentEmp && (
          <EmployeeDetails 
            onClose={() => {
              setEmpDetailVisible(false);
              bind_employee();
             
            }} 
            data={currentEmp} 
          />
        )}
      </Modal>
        </div>
    </>
}